<style lang="less">
  @import '../styles/common.less';
</style>
<style>

</style>
<template>
  <!--导入-->
  <Modal v-model="importDataModal" :width="600" :mask-closable="false" :closable="false"
         class-name="vertical-center-modal" class="Modal-Detail-div">
    <h3 slot="header" style="color:#2D8CF0" v-text="showTitle"></h3>
    <Form label-position="top">
      <FormItem label="上传附件">
        <div class="dataDetail-div chooseUser accessory">
          <div class="users" v-for="el in importDataArr">
            <span class="span-name" v-text="el.name"></span>
            <span class="span-icon" @click="delimportData(el)">
                  <Icon type="md-close"/>
                </span>
          </div>
          <Upload v-if="importDataArr.length == 0"
                  :before-upload="handleUpload" action="">
            <Button icon="ios-cloud-upload-outline">选择文件</Button>
          </Upload>
        </div>
      </FormItem>
      <FormItem label="预览" v-if="ImportData.length > 0">
        <div class="dataDetail-div dataDetail-div-padding-0">
          <Table stripe border :columns="ImportDataColumns" :data="ImportData" height="360"></Table>
        </div>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="text" @click="hideImportDataModal">取消</Button>
      <Button type="primary" @click="saveImportData()">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import Ckeditor from '../../libs/mod.ckeditor';
  import util from '@/libs/util.js';
  export default {
    name: 'importData',
    components: {},
    props: ['title', 'importModal', 'importAjaxUrl', 'importBackFun', 'importSuccessFun'],
    data () {
      return {
        uid: '',
        showTitle: '',
        AjaxUrl: '',
        importDataModal: false,
        importDataArr: [],
        ImportData: [],
        ImportDataColumns: [],
      };
    },
    created: function () {
      var _this = this;
    },
    mounted () {
      var _this = this;
    },
    watch: {
      importModal: function () {
        var _this = this;
        _this.importDataModal = _this.importModal;
        _this.AjaxUrl = _this.importAjaxUrl;
        _this.showTitle = _this.title;
      }
    },
    methods: {
      // 选中文件
      handleUpload: function (file) {
        var _this = this;
        _this.UploadFile(file);
        return false;
      },
      // 上传文件
      UploadFile: function (file) {
        var _this = this;
        var name = file.name;
        var arr = name.split('.');
        var type = arr[1];
        if (type != 'xlsx') {
          _this.$Message.destroy();
          _this.$Message.error('请上传xlsx文件!');
          return false;
        }
        var formData = new FormData();
        formData.append("file", file);
        formData.append("action", "UploadVMKImagePath");
        var params = {
          url: '/file/addFile',
          type: Util.method.post,
          data: formData,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var id = data.id;
            var name = data.name;
            var url = data.url;
            var obj = {
              id: id,
              name: name,
              url: url,
            };
            _this.importDataArr.push(obj);
            _this.getImportData(id);// 预览
          } else {
            _this.$Message.destroy();
            _this.$Message.error('上传失败!');
          }
        }
      },
      // 删除附件
      delimportData: function (el) {
        var _this = this;
        var id = el.id;
        var importDataArr = _this.importDataArr;
        for (var k in importDataArr) {
          if (!importDataArr[k]) {
            continue;
          }
          if (id == importDataArr[k].id) {
            var del = importDataArr.splice(k, 1);
            break;
          }
        }
        _this.importDataArr = importDataArr;
        _this.ImportDataColumns = [];
        _this.ImportData = [];
      },
      // 预览数据
      getImportData: function (file_id) {
        var _this = this;
        if (!file_id) {
          return;
        }
        var data = {
          fid: file_id,
          lines: 10,
        };
        var params = {
          url: '/file/exclePreview',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data;
            var ImportDataColumns = [];
            var ImportData = [];
            if (_data.length > 0) {
              var Sheet1_data = _data[0].data;
              if (Sheet1_data.length > 0) {
                // 表头
                var titleArr = Sheet1_data[0];
                for (var t in titleArr) {
                  if (!titleArr[t]) {
                    continue;
                  }
                  var col = titleArr[t].col;
                  var title = titleArr[t].title;
                  var Columns = {
                    key: 'key_' + title + '_' + col,
                    title: title,
                    width: 150,
                  };
                  ImportDataColumns.push(Columns);
                }
                // 数据
                for (var k in Sheet1_data) {
                  if (!Sheet1_data[k]) {
                    continue;
                  }
                  var dataObj = {};
                  var dataArr = Sheet1_data[k];
                  for (var r in dataArr) {
                    if (!dataArr[r]) {
                      continue;
                    }
                    var col = dataArr[r].col;
                    var title = dataArr[r].title;
                    var value = dataArr[r].value;
                    var key = 'key_' + title + '_' + col;
                    dataObj[key] = value;
                  }
                  if (Object.keys(dataObj).length > 0) {
                    ImportData.push(dataObj);
                  }
                }
              }
            }
            _this.ImportDataColumns = ImportDataColumns;
            _this.ImportData = ImportData;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('预览信息失败!');
          }
        }
      },
      // 取消导入
      hideImportDataModal: function () {
        var _this = this;
        _this.importDataArr = [];
        _this.ImportDataColumns = [];
        _this.ImportData = [];
        _this.AjaxUrl = '';
        _this.importDataModal = false;
        _this.$emit('importBackFun', _this.importDataModal);
      },
      // 确定导入
      saveImportData: function () {
        var _this = this;
        if (!_this.AjaxUrl) {
          _this.$Message.destroy();
          _this.$Message.error('导入服务器异常!');
          return false;
        }
        if (_this.importDataArr.length == 0) {
          _this.$Message.destroy();
          _this.$Message.error('请上传附件!');
          return false;
        }
        var file_id = _this.importDataArr[0].id;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          fid: file_id
        };
        var params = {
          url: _this.AjaxUrl,
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.hideImportDataModal();
            _this.$emit('importSuccessFun', res);
          } else {
            _this.$Message.destroy();
            _this.$Message.error('导入信息失败!');
          }
        }
      },

    }
  };
</script>
